<%-
	require("uci")
	x = uci.cursor()
	hsion_mLink_iface = {}
	hsion_mLink_status = {}
	count = 0
	x:foreach("hsion_mLink", "interface", function(s)
		local iface = ""
		local status = ""
		for opt, val in pairs(s) do
			--print('\t' .. opt .. ':' .. tostring(val))
			if opt == "net" then
				iface = tostring(val)
			end
			if opt == "track_status" then
				status = tostring(val)
			end
		end
		count = count + 1
		table.insert(hsion_mLink_iface, count, iface)
		table.insert(hsion_mLink_status, count, status)
	end)
	color_Up = "background-color:#48D35D;"  	 --绿色
	color_Down = "background-color:#E85E4F;"     --红色
	color_Stop = "background-color:#BDBDB2;"     --灰色
-%>

<%+header%>
<script type="text/javascript">//<![CDATA[
XHR.poll(1, 
		 '<%=luci.dispatcher.build_url("admin", "network", "hsion_mLink", "hsion_mLink_status_refresh")%>', 
		 {hsion_mLink_status_refresh:1}, 
		 function(x, info) {
			var pid = parseInt(info.pid);
			var count = parseInt(info.count);
			//var div_running = document.getElementById('running');
			if(isNaN(pid) || pid == null || pid == undefined || pid <= 0) {
                //div_running.innerText = "Not Running";
				for(i = 0; i < count; i++) {
					var iface = info.hsion_mLink_iface[i];
					var status = info.hsion_mLink_status[i];
					console.log(iface + ":" + status + "(" + typeof(status) + ")");
					var id = document.getElementById(iface);
					if(id) {
						id.setAttribute("style", "<%=color_Stop%>");
					}
					else {
						console.log("document.getElementById(" + iface + ") is null or undefined" );
					}
				}
				
				return;
			}
			//else {
            //    div_running.innerText = "MultiLink Status";
			//}
	
			for(i = 0; i < count; i++) {
				var iface = info.hsion_mLink_iface[i];
				var status = info.hsion_mLink_status[i];
				console.log(iface + ":" + status + "(" + typeof(status) + ")");
				var id = document.getElementById(iface);
				if(id) {
					if(status == "0") {
						id.setAttribute("style", "<%=color_Down%>");
					}
					else if(status == "1") {
						id.setAttribute("style", "<%=color_Up%>");
					}
					else {
						id.setAttribute("style", "<%=color_Stop%>");
					}
				}
				else {
					console.log("document.getElementById(" + iface + ") is null or undefined" );
				}
			}
		}
	);
</script>
<style>
.hsion_mLink_div {
	width: <%=(100/(2*count + 1))%>%;
	line-height: 45px;    /*div中文字内容垂直居中*/
    text-align: center;   /*让文字水平居中*/
	float:left;
}
.hsion_mLink_div_hint {
	width: 20px;
	line-height: 20px;    /*div中文字内容垂直居中*/
    text-align: center;   /*让文字水平居中*/
	float:left;
}

</style>
<div id="maxname" style="width:100%;">
	<div class="hsion_mLink_div_hint" style="<%=color_Stop%>"><font>&nbsp</font></div>&nbsp&nbsp&nbsp <font style="font-size:20px;">Program is not running</font><br />
	<div class="hsion_mLink_div_hint" style="<%=color_Up%>"><font>&nbsp</font></div>&nbsp&nbsp&nbsp <font style="font-size:20px;">Interface is connected with internet</font><br />
	<div class="hsion_mLink_div_hint" style="<%=color_Down%>"><font>&nbsp</font></div>&nbsp&nbsp&nbsp <font style="font-size:20px;">Interface is disconnected with internet</font><br />
	<div style="hsion_mLink_div;">
        <!--<h1 id="running" style="margin-bottom:0;text-align:center;"><%:MultiLink Status%></h1> -->
	</div>
	<br/>
	<% for i=1,count do %>
			<div class="hsion_mLink_div"><font>&nbsp</font></div>
			<div id="<%=hsion_mLink_iface[i]%>" class="hsion_mLink_div" style=
				<% if hsion_mLink_status[i] == "1" then %>
					"<%=color_Up%>"
				<% elseif hsion_mLink_status[i] == "0" then %>
					"<%=color_Down%>"
				<% end %>
			>
				<strong><font style="font-size:25px;"><%=hsion_mLink_iface[i]%></font></strong>
			</div>
			<% if i == count then %>
				<div class="hsion_mLink_div"><font>&nbsp</font></div>
			<% end %>
	<% end %>
	
</div>

<%+footer%>


